<template>
  <div>
    <img :src="url + `/file/` + prdInfo.prdImgCover" style="width: 100%;height: 200px">
    <a-divider style="margin: 2px 0;"/>
    <div style="width: 100%;height: 80px">
      <p style="line-height: 30px;font-size: 30px;margin-bottom: 5px">￥ {{ prdInfo.prdPrice }}</p>
      <p style="line-height: 20px;font-size: 20px;margin-bottom: 5px;padding-left: 8px"> {{ prdInfo.prdName }}</p>
      <p style="line-height: 10px;font-size: 10px;margin-bottom: 5px;padding-left: 8px"> {{ prdInfo.prdSubName }}</p>
    </div>
    <a-card title="商品详细" :bordered="true" style="width: 100%">
      <img v-if="prdInfo.prdImg01 != ''" :src="url + `/file/` + prdInfo.prdImg01" style="width: 100%;height: 200px">
      <img v-if="prdInfo.prdImg02 != ''" :src="url + `/file/` + prdInfo.prdImg02" style="width: 100%;height: 200px">
      <img v-if="prdInfo.prdImg03 != ''" :src="url + `/file/` + prdInfo.prdImg03" style="width: 100%;height: 200px">
      <img v-if="prdInfo.prdImg04 != ''" :src="url + `/file/` + prdInfo.prdImg04" style="width: 100%;height: 200px">
      <img v-if="prdInfo.prdImg05 != ''" :src="url + `/file/` + prdInfo.prdImg05" style="width: 100%;height: 200px">
      <img v-if="prdInfo.prdImg06 != ''" :src="url + `/file/` + prdInfo.prdImg06" style="width: 100%;height: 200px">
      <img v-if="prdInfo.prdImg07 != ''" :src="url + `/file/` + prdInfo.prdImg07" style="width: 100%;height: 200px">
      <img v-if="prdInfo.prdImg08 != ''" :src="url + `/file/` + prdInfo.prdImg08" style="width: 100%;height: 200px">
      <img v-if="prdInfo.prdImg09 != ''" :src="url + `/file/` + prdInfo.prdImg09" style="width: 100%;height: 200px">
      <img v-if="prdInfo.prdImg10 != ''" :src="url + `/file/` + prdInfo.prdImg10" style="width: 100%;height: 200px">
    </a-card>
  </div>
</template>

<script>
    import { queryPrd } from '@/api/prd'

    export default {
        name: 'ProductH5',
        data () {
            return {
              url: process.env.VUE_APP_API_BASE_URL,
              prdInfo: {}
            }
        },
        mounted () {
          queryPrd({ prdNo: this.$route.query.prdNo }).then(rsp => {
            this.prdInfo = rsp['data'][0]
          })
        }
    }
</script>

<style scoped>

</style>
